{% extends "base.html" %}

{% block title11 %}
    active
{% endblock %}

{% block page-css %}
    <style>
        .hide {
            display: none;
        }
    </style>
{% endblock %}
{% block page-body %}
    <h1 class="page-header">数据添加</h1>

    <!--面板 开始-->
    <div class="panel panel-primary">
    <div class="panel-heading">主机信息</div>
    <div class="panel-body">
        {% csrf_token %}
        <div class="form-inline">
            <div class="form-group">
                <div class="form-group ">
                    <span><strong>IP</strong></span>
                    <input name="ip" type="text" class="form-control  " id="ip" value="10.">
                    <span class="help-block hide" style="color: red;font-size: 12px;padding-left: 14px;" id="msg">该网段不存在!</span>
                </div>
            </div>
            <div class="form-group form-inline">
                <div class=" form-group ">
                    <span><strong>厂商</strong></span>
                    <select name="vendor" type="text" style="display: inline" class="form-control" id="vendor"
                            value="aqjg">
                        {% for vendor in vendors %}
                            <option value="{{ vendor.id }}">{{ vendor.vendor }}</option>
                        {% endfor %}
                    </select>
                </div>
            </div>
            <div class="form-group form-inline">
                <div class="form-group form-inline ">
                    <span><strong>业务</strong></span>
                    <select name="service" type="text" class="form-control" id="service">
                        {% for service in services %}
                            <option value="{{ service.id }}">{{ service.service }}</option>
                        {% endfor %}
                    </select>
                </div>
            </div>

            <div class="form-group form-inline">
                <span><strong>网段</strong></span>
                <select name="network" type="text" class="form-control" id="network">
                    {% for network in networks %}
                        <option value="{{ network.id }}">{{ network.network }}</option>
                    {% endfor %}
                </select>
            </div>

            <button id="add1" type="submit" class="btn btn-success ">添加</button>



        </div>
        <!--面板 结束-->
    </div>
{% endblock %}

{% block page-script %}
    <script type="text/javascript">
        $(function () {

            var old_ip = $('#ip').val();

            $("#ip").change(function () {
                $("#msg").addClass("hide");
                var new_ip = $('#ip').val();
                if (new_ip !== old_ip) {
                    var reg = /(\d{1,3}).(\d{1,3}).(\d{1,3}).(\d{1,3})/;
                    var a = new_ip.replace(reg, '$1.$2.$3.') + "0";
                }
                var b = $("#network > option");
                ip_list = [];
                for (var i = 0; i < b.length; i++) {
                    ip_list.push(b[i].text)
                }
                if (ip_list.indexOf(a) != -1) {
                {#if (ip_list.indexOf(a) ) {#}
                    for (var i = 0; i < b.length; i++) {
                        if (a === b[i].text) {
                            $("#network").val(b[i].value);
                        }
                    }
                } else {
                    $("#msg").removeClass("hide");
                }


            });

            $("#add1").on('click', function () {
                {#ajax data中携带csrf_token#}
                var csrf=$('input[name="csrfmiddlewaretoken"]').val();

                $.ajax({
                    url: "/add_host.html",
                    type: "post",
                    data: {
                        "ip": $("#ip").val(),
                        "vendor_id": $("#vendor").val(),
                        "service_id": $("#service").val(),
                        "network_id": $("#network").val(),
                        "csrfmiddlewaretoken":csrf
                    },
                    dataType: 'json',
                    success: function (data) {
                        console.log(data.status,data.message);
                        if (data.status) {
                            alert("添加成功");
                            location.reload();
                        } else {
                            $("#msg").text(data.message);
                            $("#msg").removeClass("hide");
                            setTimeout("location.reload()",2000);
                        }
                    }
                });
            });






        });
    </script>
{% endblock %}
<!--不能删除 -->
{#<script language="JavaScript">#}
{#         // 给input  date设置默认值#}
{#    var now = new Date();#}
{#    //格式化日，如果小于9，前面补0#}
{#    var day = ("0" + now.getDate()).slice(-2);#}
{#    //格式化月，如果小于9，前面补0#}
{#    var month = ("0" + (now.getMonth() + 1)).slice(-2);#}
{#    //拼装完整日期格式#}
{#    var today = now.getFullYear()+"-"+(month)+"-"+(day) ;#}
{#    //完成赋值#}
{#    $('#date').val(today);#}
{##}
{#</script>#}
<!--不能删除 -->


